{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login | MI Tagger</title>
    <link rel="shortcut icon" href="/static/img/favicon.png">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/login.css">
    <!-- Java Script -->
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
</head>
<body>
    <div id="login">
        <h1>
            <span style="color: #2aabe2">M</span><span style="color: #ed1b24">I</span>
            <span style="color: #3ab54b">T</span><span style="color: #f6931b">a</span><!--
         --><span style="color: #0072bb">g</span><span style="color: #0171b9">g</span><!--
         --><span style="color: #ed1e79">e</span><span style="color: #2face2">r</span>
        </h1>
        <div class="alert alert-danger hide">Incorrect username or password.</div>
        {% if isLoggedOut %}
        <div class="alert alert-success fade in">You are now logged out.</div>
        {% endif %}
        <form id="login-form" method="post" onsubmit="onSubmit(); return false;">
            <p>
                <label for="username">Username</label><br />
                <input id="username"maxlength="16" type="text" />
            </p>
            <p>
                <label for="password">Password</label><br />
                <input id="password"maxlength="16" type="password" />
            </p>
            <p>
                <label for="remember-me">
                    <input id="remember-me" type="checkbox" /> Remember Me
                </label>
                <button id="login-action" type="submit" class="btn btn-primary">Login</button>
            </p>
        </form> <!-- #login-form -->
    </div> <!-- #login -->
    <!-- JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript">
        jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
            this.each(function() {
                $(this).css({
                    position: "relative"
                });
                for (var x = 1; x <= intShakes; x++) {
                    $(this).animate({
                        left: (intDistance * -1)
                    }, (((intDuration / intShakes) / 4))).animate({
                        left: intDistance
                    }, ((intDuration / intShakes) / 2)).animate({
                        left: 0
                    }, (((intDuration / intShakes) / 4)));
                }
            });
            return this;
        };
    </script>
    <script type="text/javascript">
        function onSubmit() {
            $('.alert-success').hide();
            
            $('button[type=submit]').attr('disabled', 'disabled');
            $('button[type=submit]').html('Please Wait...');
            
            var username    = $('#username').val(),
                password    = $('#password').val(),
                rememberMe  = $('#remember-me').is(':checked');
            doLoginAction(username, password, rememberMe);
        };
    </script>
    <script type="text/javascript">
        function doLoginAction(username, password, rememberMe) {
            //var postData = 'username=' + username + '&password=' + password +
            //                '&isAllowAutoLogin=' + rememberMe;
            var postData = {
                'username': username,
                'password': password,
                'isAllowAutoLogin': rememberMe
            }
            $.ajax({
                    type: 'POST',
                    url: '/accounts/login',
                    data: postData,
                    dataType: 'JSON',
                    success: function(result){
                        return processLoginResult(result);
                }
            });
        }
    </script>
    <script type="text/javascript">
        function processLoginResult(result) {
            if ( result['isSuccessful'] ) {
                if( result['isAdministrator'] ){
                    window.location.href="/accounts/admin"
                }else{
                    window.location.href="/home/import";
                }
            } else {
                $('#password').val('');
                $('#login-form').shake(3, 50, 500);
                $('.alert-danger').removeClass('hide');
            }

            $('button[type=submit]').html('Login');
            $('button[type=submit]').removeAttr('disabled');
        }
    </script>
</body>
</html>
